<template>
  <div class="index-user bottom-border"
       @click="show = !show">
    <div class="user-name person-avatar">{{$store.state.userInfo.userName}}</div>
    <div>{{$store.state.currentRoleName}}</div>
    <van-icon name="arrow-up"
              v-if="show" />
    <van-icon name="arrow-down"
              v-else />
  </div>
  <pop :opened="opened"
       position="bottom"
       :style="{ height: 'auto', width: '100%' }"
       :round="true">
    <template #content>

      <div class="role-description">
        <div class="nav-space">角色切换</div>
      </div>
      <div class="bscroll-wrapper"
           ref="wrapper">
        <div class="role-select-roles">
          <template v-for="( value, key, index ) in $store.state['userInfo'].roles"
                    :key="index">
            <van-cell clickable
                      class="role"
                      :class="value === $store.state.currentRoleName ? 'active' : 'unActive' "
                      @click="changeRole(key)">
              <template #title>
                <span class="custom-title">{{value}}</span>
                <van-tag type="warning"
                         v-if="value === $store.state.currentRoleName"
                         round>当前角色</van-tag>
              </template>
            </van-cell>
          </template>
        </div>
      </div>
    </template>
  </pop>
</template>

<script>
import { reactive, ref, provide, toRefs } from 'vue'
import Pop from '@/components/Pop.vue'
import usebScroll from '@/hooks/usebScroll'
import { Toast } from 'vant'
import { doChangeRole } from '@/api/request/business'
import { useStore } from 'vuex'
export default {
  components: {
    Pop
  },
  setup () {
    const popState = reactive({
      show: false
    })
    const store = useStore()
    provide('popState', popState)
    const $scroll = usebScroll()
    const wrapper = ref('wrapper')
    const opened = () => {
      $scroll.initOrRefreshBScroll(wrapper.value)
    }
    const changeRole = (switchGroupId) => {
      Toast.loading({
        message: '请稍后...',
        forbidClick: true,
        duration: 0
      })
      doChangeRole({
        switchGroupId,
        refreshToken: store.state.userInfo.token
      }).then(response => {
        if (response.body.code === '200') {
          const responseItem = response.body.data.item
          Toast.success(`切换为 \n ${response.body.data.item.groupName}`)
          store.dispatch('recordUserInfo', {
            token: responseItem.key,
            roles: store.state.userInfo.roles,
            userName: responseItem.userName,
          })
          store.dispatch('recordCurrentRoleName', responseItem.groupName)
          store.dispatch('recordMenus', responseItem.joinCheckModules.reverse())
          popState.show = false
        }
      })
    }
    return {
      ...toRefs(popState),
      opened,
      changeRole,
      wrapper
    }
  }
}
</script>

<style scoped>
.index-user {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  color: #222;
  font-size: 13px;
  padding: 8px 15px;
  background: #f7f7f7;
}

::v-deep(.van-popup) {
  border-radius: 12px 12px 0 0;
}

.active {
  background: #ecf1fe;
  color: #4073f5;
}

.unActive {
}

.bscroll-wrapper {
  max-height: 463px;
}

span.van-tag.van-tag--warning {
  margin-left: 12px;
}
.van-tag--warning {
  background-color: var(--van-tag-warning-color);
}

.user-name {
}

.person-avatar {
  width: 27px;
  /* border-radius: 2px; */
  border-radius: 50px;
  height: 27px;
  font-size: 12px;
  line-height: 27px;
  text-align: center;
  background: #28ba8e;
  color: #fff;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: 10px;
}

.nav-space {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
}
</style>